<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>用户注册</title>
	<link rel="stylesheet" type="text/css" href="/public/css/xm/login.css">
	<link rel="stylesheet" href="/public/js/layer/theme/default/layer.css" type="text/css">
	<style type="text/css">
		.btnChoosePhoto {
			height: 40px;
			border: none;
			width: 110px;
		}
		.errorTips{
			color: orange;;
		}
	</style>
</head>

<body>
	<form method="post" action="/customerInfo/doRegister?_csrf={{csrf}}" id="registerForm" enctype="multipart/form-data">
		<div class="regist">
			<div class="regist_center">
				<div class="regist_top">
					<div class="left fl">会员注册</div>
					<div class="right fr"><a href="./index.html" target="_self">Softeem商城</a></div>
					<div class="clear"></div>
					<div class="xian center"></div>
				</div>
				<div class="regist_main center">
					<div class="username">用&nbsp;&nbsp;户&nbsp;&nbsp;名:&nbsp;&nbsp;
						<input class="shurukuang" type="text"
							name="customername" id="customername" placeholder="请输入你的用户名" data-rule-required="true" />
						<span>请不要输入汉字</span>
					</div>
					<div class="username">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;
						<input class="shurukuang" type="password" id="customerpwd" name="customerpwd"
							placeholder="请输入你的密码" data-rule-required="true"/>
							<span>请输入6位以上字符</span>
					</div>

					<div class="username">确认密码:&nbsp;&nbsp;
						<input class="shurukuang" type="password" name="confirmpwd"
							placeholder="请确认你的密码"  data-rule-required="true" data-rule-equalto="#customerpwd"/>
							<span>两次密码要输入一致哦</span>
						</div>
					<div class="username">手&nbsp;&nbsp;机&nbsp;&nbsp;号:&nbsp;&nbsp;
						<input class="shurukuang" type="text"
							name="customertel" placeholder="请填写正确的手机号" data-rule-required="true" />
							<span>填写下手机号吧，方便我们联系您！</span>
						</div>
					<div class="username">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:&nbsp;&nbsp;
						<input class="shurukuang" type="text" name="customermail"
							placeholder="请输入你的邮箱"  data-rule-required="true" data-rule-email="true" />
							<span>请输入6位以上字符</span>
						</div>
					<div class="username">昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:&nbsp;&nbsp;
						<input
							class="shurukuang" type="text" name="customernickname" 
							placeholder="请输入你的昵称" data-rule-required="true" />
							<span>不能为空</span>
						</div>
					<div class="username">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:&nbsp;&nbsp;
						<select name="customersex" class="shurukuang" style="height: 41px;width: 238px;">
							<option value="男">男</option>
							<option value="女">女</option>
						</select><span>请选择性别</span></div>
					<div class="username">
						<div class="left fl">验&nbsp;&nbsp;证&nbsp;&nbsp;码:&nbsp;&nbsp;<input class="yanzhengma"
								type="text" id="VCode" placeholder="请输入验证码" /></div>
						<div class="right fl">
							<img style="cursor: pointer;" src="/customerInfo/getVCode?" alt="验证码" id="VCodeImg"
								style="height:41px">
						</div>
						<div class="clear"></div>
					</div>
					<div class="username">头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;像:&nbsp;&nbsp;
						<input style="display: none;" type="file" accept="image/*" id="customerphoto"
							name="customerphoto" />
						<button type="button" onclick="document.getElementById('customerphoto').click()"
							class="btnChoosePhoto">请选头像</button>
						<img src="" id="customerphotopreview" alt="" style="max-height: 100px;max-width: 100px">
					</div>
				</div>
				<div class="regist_submit">
					<input class="submit" type="submit" id="btnRegister" value="立即注册">
				</div>
			</div>
		</div>
	</form>
</body>
<script src="/public/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="/public/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="/public/js/messages_zh.js" type="text/javascript"></script>
<script src="/public/js/layer/layer.js" type="text/javascript"></script>
<script>
	$(function () {
		//点击刷新验证码
		$("#VCodeImg").click(function () {
			var src = $(this).attr("src");
			// 在请求地址的后面加上一个随机数，这样每次请求的SRC都不一样，这样img就会重新发起请求
			// 重新发起请求就相当于重新获取验证码
			$(this).attr("src", src.replace(/\?.*/g, "?" + Math.random()));
		});
		$("#customerphoto").change(function () {
			//将文件转base64以后在img标签里面显示出来预览
			var file = this.files[0];
			//使用HTML5的FileReader去读文件
			var fr = new FileReader();
			fr.onload = function (e) {
				$("#customerphotopreview").attr("src", e.target.result);
			}
			fr.readAsDataURL(file);
		});

		$("#registerForm").validate({
			errorPlacement: function (err, element) {
				err.appendTo(element.next());
			},
			errorClass:"errorTips"
		});

		$("#btnRegister").click(function(){
			//检测验证码是否正确
			var vcode=$("#VCode").val();
			var flag=false;
			$.ajax({
				async:false,
				url:"/customerInfo/checkVCode/"+vcode,
				success:function(data){
					if(data==true){
						flag=true;
					}
					else{
						layer.alert("验证码错误，请重试");
						$("#VCodeImg").click();

					}
				}
			});
			return flag;
		});
		//检测用户名是否已经存在
		$("#customername").blur(function(){
			var customername = $(this).val().trim();
			if(customername){
				$.get("/customerInfo/checkCustomerName/"+customername,function(data){
					if(data==true){
						layer.alert("当前用户名已存在");
						$("#customername").val("");
					}
				})
			}
		})
	})
</script>

</html>